<template>
	<QPage>
		<QScrollArea class="example-container">
			<Menu :data="menus"/>
		</QScrollArea>
		<ApiTable
			name="Menu"
			:data="data"></ApiTable>
		<Code :code="code"/>
	</QPage>
</template>

<script>
import {
	QScrollArea,
	QPage
} from 'quasar';

export default {
	name:'MenuDoc',
	components:{
		QScrollArea,
		QPage,
	},
	data(){
		return {
			menus:[
				{
					name:'菜单1',
					icon:'',
					children:[
						{name:'菜单1-1'},
						{name:'菜单1-2'},
						{
							name:'菜单1-3',
							children:[
								{name:'菜单1-3-1'},
								{name:'菜单1-3-2'},
							]
						},
					]
				},{
					name:'菜单2',
					icon:'',
					children:[
						{name:'菜单2-1'},
						{name:'菜单2-2'},
					]
				},
			],
			data:[
				{
					tabName:'属性',
					fields:[
						{name:'名称',key:'name'},
						{name:'类型',key:'type'},
						{name:'说明',key:'info'},
						{name:'默认值',key:'default'},
					],
					list:[
						{name:'名称',type:'',info:'',default:''}
					]
				}
			]
		};
	},
	computed:{
		code(){
			return `
<template>
	<IframeLoad ref="iframe" :src="src" @load="loadFn"/>
	<iButton type="primary" @click="clickFn">执行任务</iButton>
</template>
<script>
	export default{
		data:function(){
			return {
				src:'test.html'
			};
		},
		methods:{
			loadFn:function(window){
				window.document.body.insertAdjacentHTML('beforeend','<p>初始化任务...</p>');
			},
			clickFn:function(){
				this.$refs.iframe.runTask(function(window){
					window.document.body.insertAdjacentHTML('beforeend','<p>执行任务...</p>');
				})
			}
		}
	};
</${'script'}>
`;
		}
	}
};
</script>

<style lang="scss">

</style>
